<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Server Testing BandWidth</title>   
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/static/scs/bootstrap.css">
    <script type="text/javascript" src="/static/scs/jquery-1.js"></script>
    <script type="text/javascript" src="/static/scs/bootstrap.js"></script>
    <script type="text/javascript" src="/static/scs/swfobject.js"></script>
    <script type="text/javascript" src="/static/scs/srs.page.js"></script>
    <script type="text/javascript" src="/static/scs/srs.log.js"></script>
    <script type="text/javascript" src="/static/scs/srs.player.js"></script>
    <script type="text/javascript" src="/static/scs/srs.publisher.js"></script>
    <script type="text/javascript" src="/static/scs/srs.utility.js"></script>
    <script type="text/javascript" src="/static/scs/srs.bandwidth.js"></script>
    <style>
        body{
            padding-top: 55px;
        }
        #main_modal {
            width: 700px;
            margin-left: -350px;
        }
    </style>
    <script type="text/javascript">
        var bandwidth = null;
        
        $(function(){
            //srs_init_bwt("#txt_url");
            $("#btn_play").click(on_click_play);
            $("#main_modal").on("show", on_start_bandwidth_test);
            $("#main_modal").on("hide", on_stop_bandwidth_test); 
        });
        
        function on_click_play() {
            $("#check_status").text("");
            $("#check_info").text("");
            $("#progress_bar").width("0%");
            $("#main_modal").modal({show:true, keyboard:false});
        }
        function on_start_bandwidth_test() {
            $("#div_container").remove();
            $("#progress_bar").removeClass("bar-danger");

            var div_container = $("<div/>");
            $(div_container).attr("id", "div_container");
            $("#player").append(div_container);

            var player = $("<div/>");
            $(player).attr("id", "player_id");
            $(div_container).append(player);
            
            var url = $("#txt_url").val();
            
            bandwidth = new SrsBandwidth("player_id", 100, 1);
            bandwidth.on_bandwidth_ready = function() {
                this.check_bandwidth(url);
            }
            bandwidth.on_update_progress = function(percent) {
                $("#progress_bar").width(percent + "%");
            }
            bandwidth.on_update_status = function(status) {
                $("#check_status").text(status);
            }
            bandwidth.on_srs_info = function(srs_server, srs_primary, srs_authors, srs_id, srs_pid, srs_server_ip) {
                $("#check_info").text("ip:" + srs_server_ip);
            }
            bandwidth.on_error = function(code) {
                $("#progress_bar").addClass("bar-danger");
            }
            bandwidth.render(url);
        }
        function on_stop_bandwidth_test() {
            bandwidth.stop();
        }
    </script>
</head>
<body>
<div class="container">
    <div class="alert alert-info fade in">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong><span>Usage:</span></strong> <span>Click "Start bandwidth test" to measure bandwidth, maximum bandwidth used by the server to test limits</span>
    </div>
     <div class="form-inline">
         <input id="txt_url" class="input-xxlarge" value="rtmp://54.67.47.134:2000/live?key=35c9b402c12a7246868752e2878f7e0e&vhost=bandcheck.srs.com" type="hidden" />
         <button class="btn btn-primary" id="btn_play">Start bandwidth test</button>
    </div>
     <div id="main_modal" class="modal hide fade">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
             <h3>Bandwidth Check</h3>
         </div>
         <div class="modal-body">
            <div class="row-fluid">
                <div class="span1"></div>
                <div class="span10">
                    <div class="progress progress-striped active" id="pb_buffer_bg">
                        <div class="bar" style="width: 0%;" id="progress_bar"></div>
                    </div>
                </div>
                <div class="span1"></div>
            </div>
            <div id="check_status">status</div>
            <div id="check_info">info</div>
         </div>
         <div class="modal-footer">
             <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true"> Close </button>
         </div>
     </div>
    <hr>
    <div class="container">
        <div id="player"></div>
    </div>
</div>
</body>
</html>